<template>
	<view class="container">
		<navigation-custom :config="config" :scrollTop="scrollTop" @customConduct="customConduct" :scrollMaxHeight="scrollMaxHeight" />
		<view class="mask" v-if="isPoster"></view>
		<image src="../../../../static/images/share-bg.png" style="width: 100%; height: 50vh"></image>
		<view class="user-share-wrapper">
			<button class="share-btn share-bgc" open-type="share">邀请好友</button>
			<button class="gen-poster-btn share-bgc" @tap="genPoster">生成海报</button>
		</view>
		<view class="poster-wrapper" v-if="isPoster">
			<view class="poster-bg">
				<text class="poster-close" @tap="isPoster = false">×</text>
				<l-painter ref="painter" isCanvasToTempFilePath @success="path = $event" css="width: 600rpx;">
					<!-- <l-painter-image
						src="https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg"
						css="margin-left: 40rpx; margin-top: 30rpx; width: 84rpx;  height: 84rpx; border-radius: 50%;"
					/>
					<l-painter-view css="margin-top: 30rpx; padding-left: 20rpx; display: inline-block">
						<l-painter-text text="隔壁老王" css="display: block; padding-bottom: 10rpx; color: #fff; font-size: 32rpx; fontWeight: bold" />
						<l-painter-text text="为您挑选了一个好物" css="color: rgba(255,255,255,.7); font-size: 24rpx" />
					</l-painter-view>
					<l-painter-view
						css="margin-left: 40rpx; margin-top: 30rpx; padding: 32rpx; box-sizing: border-box; background: #fff; border-radius: 16rpx; width: 550rpx; box-shadow: 0 20rpx 58rpx rgba(0,0,0,.15)"
					>
						<l-painter-image
							src="https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg"
							css="object-fit: cover; object-position: 50% 50%; width: 500rpx; height: 500rpx; border-radius: 12rpx;"
						/>
						<l-painter-view css="margin-top: 32rpx; color: #FF0000; font-weight: bold; font-size: 28rpx; line-height: 1em;">
							<l-painter-text text="￥" css="vertical-align: bottom" />
							<l-painter-text text="39" css="vertical-align: bottom; font-size: 58rpx" />
							<l-painter-text text=".39" css="vertical-align: bottom" />
							<l-painter-text text="￥59.99" css="vertical-align: bottom; padding-left: 10rpx; font-weight: normal; text-decoration: line-through; color: #999999" />
						</l-painter-view>
						<l-painter-view css="margin-top: 32rpx; font-size: 26rpx; color: #8c5400">
							<l-painter-text text="自营" css="color: #212121; background: #ffb400;" />
							<l-painter-text text="30天最低价" css="margin-left: 16rpx; background: #fff4d9; text-decoration: line-through;" />
							<l-painter-text text="满减优惠" css="margin-left: 16rpx; background: #fff4d9" />
							<l-painter-text text="超高好评" css="margin-left: 16rpx; background: #fff4d9" />
						</l-painter-view>
						<l-painter-view css="margin-top: 30rpx">
							<l-painter-text
								css="line-clamp: 2; color: #333333; line-height: 1.8em; font-size: 36rpx; width: 478rpx; padding-right:32rpx; box-sizing: border-box"
								text="360儿童电话手表9X 智能语音问答定位支付手表 4G全网通20米游泳级防水视频通话拍照手表男女孩星空蓝"
							></l-painter-text>
							<l-painter-qrcode css="width: 128rpx; height: 128rpx;" text="limeui.qcoon.cn"></l-painter-qrcode>
						</l-painter-view>
					</l-painter-view> -->
					<!-- <l-painter-image :src="posterImgSrc" css="width: 600rpx; border-radius: 10%"></l-painter-image> -->
					<!-- <l-painter-image src="../../../../static/images/user-poster-bg.png" css="width: 600rpx;" style="position: relative"></l-painter-image> -->
					<!-- <l-painter-view css="background: linear-gradient(#f94826 50%, #f7342d 100%)"> -->
					<l-painter-view css=" background-image: url('../../../../static/images/poster-bg.png'); height: 1000rpx; padding-bottom: 40rpx">
						<l-painter-view
							css="background-color: rgba(255, 255, 255, 0.8);  width: 550rpx; padding: 20rpx; border-radius: 30rpx; box-sizing: border-box; margin-top: 690rpx; margin-left: 25rpx"
						>
							<l-painter-view css="display: flex; align-items: center; background-color: #fff; padding: 15rpx; border-radius: 20rpx;">
								<l-painter-view
									css="display: flex; justify-content: center; align-items: center; width: 100rpx; height: 100rpx; border-radius: 50%; background-color: #ffcfcb;"
								>
									<l-painter-image src="../../../../static/images/coupon-logo.png" css="width: 80rpx; height: 80rpx;"></l-painter-image>
								</l-painter-view>
								<l-painter-view css="margin-left: 20rpx; vertical-align:middle; font-family: 'Times New Roman'">
									<l-painter-text css="color: #fc5955" text="¥"></l-painter-text>
									<l-painter-text css="color: #fc5955; margin: 0 10rpx; font-size: 45rpx" :text="coupon.couponPrice"></l-painter-text>
									<l-painter-text css="color: #fc5955;" text="满"></l-painter-text>
									<l-painter-text css="color: #fc5955; font-size: 22rpx; margin: 0 5rpx" :text="coupon.requirePrice"></l-painter-text>
									<l-painter-text css="color: #fc5955;" :text="'元使用×' + 1 + '张'"></l-painter-text>
									<l-painter-text css="display: block; color: #a18b9c; font-size: 20rpx;" :text="'领取后' + coupon.expireTime + '天有效'"></l-painter-text>
								</l-painter-view>
							</l-painter-view>
							<l-painter-view css=" display: flex; margin-top: 20rpx;">
								<l-painter-view css="width: 380rpx">
									<l-painter-image src="../../../../static/images/logo.png" css="width: 60rpx; height: 60rpx"></l-painter-image>
									<l-painter-text css="line-clamp: 2; color: #333333; line-height: 1.8em; font-size: 30rpx; padding-left: 10rpx" text="秦氏京点"></l-painter-text>
									<l-painter-text css="display: block; color: #a18b9c; font-size: 25rpx; padding-top: 15rpx" text="长按图片识别小程序码"></l-painter-text>
								</l-painter-view>
								<l-painter-image :src="posterImgSrc" css="width: 130rpx; border-radius: 10%"></l-painter-image>
							</l-painter-view>
						</l-painter-view>
					</l-painter-view>
					<!-- <l-painter-view css="width: 630rpx; text-align: center">
						<l-painter-text
							text="保存图片"
							css="display: inline-block; margin-top: 20rpx; padding: 20rpx 60rpx; border: 1rpx solid #fff; border-radius: 20rpx; color: #fff"
						></l-painter-text>
					</l-painter-view> -->
				</l-painter>
				<button
					style="
						width: 200rpx;
						background-color: transparent;
						margin-top: 20rpx;
						padding: 0;
						color: #fff;
						font-size: 30rpx;
						border: 1rpx solid #fff;
						border-radius: 100rpx;
					"
					@tap="savePosterImage"
				>
					保存图片
				</button>
			</view>

			<!-- <image :src="path" class="poster-image" style="object-fit: fill; object-position: 50% 50%"></image> -->
			<!-- <l-painter ref="painter" isCanvasToTempFilePath @success="path = $event">
				<l-painter-image src="../../../../static/images/poster-bg.jpg" css="display: block; width: 630rpx; object-fit: fill; object-position: 50% 50%"></l-painter-image>
				<l-painter-view css="padding: 20rpx; width: 630rpx; background-color: #ffe8e6">
					<l-painter-image src="../../../../static/logo.png" css="width: 70rpx; height: 70rpx; border-radius: 50%;"></l-painter-image>
					<l-painter-view css="width: 630rpx; display: inline-block">
						<l-painter-text text="¥10满100元使用×1张" css="display: block; color: #fc6561; font-size: 35rpx"></l-painter-text>
						<l-painter-text text="领取后10天有效" css="color: #b9babf; font-size: 25rpx"></l-painter-text>
					</l-painter-view>
				</l-painter-view>
				<l-painter-view css="width: 630rpx; background-color: #ffe8e6">
					<l-painter-view css="display: inline-block">
						<l-painter-image src="../../../../static/logo.png" css="display: block; width: 70rpx; height: 70rpx; border-radius: 50%"></l-painter-image>
						<l-painter-text text="京点蛋糕"></l-painter-text>
					</l-painter-view>
					<l-painter-text text="长按图片识别小程序码" css="color: #a2a0a1; font-size: 25rpx"></l-painter-text>
					<l-painter-image :src="posterImgSrc" css="width: 150rpx; height: 150rpx; border-radius: 10%"></l-painter-image>
				</l-painter-view>
				<view class="poster-close" @tap="isPoster = false">×</view>
					<view class="poster-content">
						<view class="poster-info">
							<image src="../../../../static/logo.png" style="width: 70rpx; height: 70rpx; border-radius: 50%"></image>
							<view style="display: flex; flex-direction: column; row-gap: 15rpx">
								<text style="color: #fc6561; font-size: 35rpx">¥10满100元使用×1张</text>
								<text style="color: #b9babf; font-size: 25rpx">领取后10天有效</text>
							</view>
						</view>
						<view class="poster-applet">
							<view style="display: flex; flex-direction: column; row-gap: 15rpx">
								<view style="display: flex; align-items: center; column-gap: 10rpx">
									<image src="../../../../static/logo.png" style="width: 70rpx; height: 70rpx; border-radius: 50%"></image>
									<text>京点蛋糕</text>
								</view>
								<view style="color: #a2a0a1; font-size: 25rpx">长按图片识别小程序码</view>
							</view>
							<view>
								<image :src="posterImgSrc" style="width: 150rpx; height: 150rpx; border-radius: 10%"></image>
							</view>
						</view>
					</view>
			</l-painter> -->
		</view>

		<!-- <image :src="path" mode="widthFix"></image> -->
	</view>
</template>

<script>
import { getPosterQrcode } from '@/api/user';
import { getCoupon } from '@/api/coupon';
export default {
	data() {
		return {
			config: {
				title: '我的分享'
			},
			isPoster: false,
			posterImgSrc: '',
			path: '',
			coupon: {
				couponPrice: 0,
				requirePrice: 0,
				couponNum: 0,
				expireTime: 0
			}
		};
	},
	methods: {
		genPoster() {
			getPosterQrcode().then((res) => {
				this.posterImgSrc = 'data:image/png;base64,' + res.data.replace(/[\r\n]/g, '');
				this.isPoster = true;
			});
			getCoupon(1).then((res) => {
				this.coupon = res.data;
			});
		},
		savePosterImage() {
			this.$refs.painter.canvasToTempFilePathSync({
				fileType: 'jpg',
				// 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
				pathType: 'url',
				quality: 1,
				success: (res) => {
					console.log(res.tempFilePath);
					// 非H5 保存到相册
					// H5 提示用户长按图另存
					uni.saveImageToPhotosAlbum({
						filePath: res.tempFilePath,
						success: function () {
							console.log('save success');
						}
					});
				}
			});
		}
	}
};
</script>

<style scoped lang="less">
.mask {
	position: fixed;
	top: 0;
	width: 100%;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.6);
	z-index: 1000;
}
.user-share-wrapper {
	display: flex;
	justify-content: space-around;
	position: fixed;
	width: 100%;
	bottom: 10%;

	.share-bgc {
		background-color: #ffdb68;
		padding: 5rpx 75rpx;
		border-radius: 100rpx;
		color: #c13532;
		font-size: 35rpx;
		font-weight: bold;
		letter-spacing: 5rpx;
	}
}

.poster-wrapper {
	position: fixed;
	top: 10%;
	left: 60rpx;
	right: 60rpx;
	z-index: 9999;

	.poster-image {
		width: 100%;
	}

	.poster-bg {
		position: relative;
		padding: 30rpx 15rpx;
		image {
			width: 100%;
			height: 100%;
		}
		.poster-close {
			position: absolute;
			right: -24rpx;
			top: -10rpx;
			font-size: 40rpx;
			color: #fff;
		}
		.poster-content {
			position: absolute;
			left: 15rpx;
			right: 15rpx;
			bottom: 30rpx;
			background-color: #ffe8e6;
			border-radius: 20rpx;
			padding: 20rpx 10rpx;
		}
	}
}

.poster-content {
	.poster-info {
		display: flex;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
		column-gap: 20rpx;
		align-items: center;
	}
	.poster-applet {
		display: flex;
		justify-content: space-between;
		padding: 15rpx;
	}
}
</style>
